<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">

    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <style>
        .iphonex-padding-top {
            padding-top: 34px;
        }

        .app {
            height: 100vh;
            overflow: hidden;
        }
    </style>
    <!-- 引入样式 -->
</head>

<body>
    <div class="app" v-cloak>
        <div class="header-common">
            <div class="flex-x-s header">
                <span class="iconfont goback" @click="backPage">&#xe66f;</span>
                <div class="search flex-x-s" @click="showSearchPage">
                    <span class="iconfont">&#xe71e;</span>
                    <input type="search" maxlength="10" placeholder="请输入搜索关键词" v-model="keyword" @search="searchCity">
                </div>
                <div class="search-btn" @click="searchCity">搜索</div>
            </div>
            <div v-if="!isShowSearchPage" class="diquxuanze">
                <div class="near-pos-text">
                    最近访问
                </div>
                <div class="near-pos-items">
                    <div class="pos-active near-pos-item" @click="select(city)" v-for="city in listSelectCity"
                        :key="city.id">
                        {{filterText(city.name)}}
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="city-list">
                    <van-list v-model="loading" :finished="finished" :error="errorStatus" finished-text="没有更多了">
                        <van-cell v-for="(city, index) in listCity" :key="index" :title="city.name"
                            @click="select(city)" />
                    </van-list>
                </div>
            </div>
        </div>
    </div>

    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>


    <script>
        apiready = function () {

            var UIListCard = api.require('UIListCard');
            var headerH = null;
            var nearCityH = null;
            var header = null;
            vm = new Vue({
                el: '.app',
                data() {
                    return {
                        activeCity: 1,
                        loading: false,
                        finished: true,
                        errorStatus: false,
                        previousPage: api.pageParam.title, // 上一个跳转页面
                        isShowSearchPage: false,
                        listSelectCity: [],
                        listCity: [],
                        isShowSearchPage: false,
                        keyword: null
                    }
                },

                created() {
                    this.listSelectCity = $api.getStorage("nearCitys") || []

                    if (this.previousPage != 'home') {
                        this.listSelectCity.unshift({
                            id: -1,
                            name: '全国'
                        })
                    }

                },
                mounted() {
                    this.openFrame()
                },
                methods: {
                    openFrame() {
                        var header = $api.dom('.header-common');
                        var headerH = $api.fixStatusBar(header);
                        api.openFrame({
                            name: 'area_select_frm',
                            url: 'area_select_frm.html',
                            rect: {
                                marginTop: headerH,
                                marginBottom: 0,
                                w: 'auto'
                            },
                            pageParam: api.pageParam
                        });
                    },
                    searchCity() {
                        var vm = this;
                        index.area('getListArea')(vm.keyword, false, function (ret) {
                            console.log("搜索结果：" + JSON.stringify(ret))
                            vm.listCity = ret.data
                        })
                    },
                    backPage() {
                        if (this.isShowSearchPage) {
                            this.isShowSearchPage = false
                            this.controlShowSearch(false)
                        } else {
                            api.closeWin();
                        }
                    },
                    showSearchPage() {
                        this.controlShowSearch(true)
                        this.isShowSearchPage = true
                    },
                    controlShowSearch(isShow) {
                        api.sendEvent({
                            name: 'showSearchPage',
                            extra: { isShow: isShow }
                        });
                    },
                    select(item) {
                        console.log('选择：', JSON.stringify(item));
                        var name = "filterDistrict"
                        var listSelectCity = $api.getStorage("nearCitys") || []
                        if (listSelectCity.length >= 5) {
                            listSelectCity.splice(-1, 1)
                        }
                        var index = listSelectCity.findIndex(target => target.name == item.name)
                        if (index > -1) {
                            listSelectCity.splice(index, 1)
                        }
                        if (item.id > 0) listSelectCity.unshift(item)
                        $api.setStorage('nearCitys', listSelectCity);
                        if (this.previousPage == 'home') {
                            name = "selectedCity"
                            // 当前定位的
                            $api.setStorage('location_home', item);
                            api.setPrefs({
                                key: 'location_home',
                                value: item
                            });
                        }
                        api.sendEvent({
                            name: name,
                            extra: {
                                city: item,
                                status: api.pageParam.status
                            }
                        });
                        api.closeWin();
                    },


                }

            })
            api.addEventListener({
                name: 'notice_area_select_win'
            }, function (ret, err) {
                vm.select(ret.value.selectedItem)
            });

        }
    </script>
</body>

</html>